<template>
  <view class="payment-record">
    <!-- 统计卡片 -->
    <view class="stats-card">
      <view class="stat-item">
        <text class="count">¥{{ stats.totalAmount }}</text>
        <text class="label">总支出</text>
      </view>
      <view class="divider"></view>
      <view class="stat-item">
        <text class="count">{{ stats.totalCount }}</text>
        <text class="label">缴费笔数</text>
      </view>
      <view class="divider"></view>
      <view class="stat-item">
        <text class="count">{{ stats.pendingCount }}</text>
        <text class="label">待支付</text>
      </view>
    </view>
    
    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view class="type-filter">
        <text 
          v-for="(type, index) in paymentTypes"
          :key="index"
          :class="{ active: currentType === type.value }"
          @tap="selectType(type.value)"
        >{{ type.label }}</text>
      </view>
      
      <!-- 时间筛选 -->
      <view class="date-filter">
        <picker 
          mode="date" 
          :value="startDate" 
          :end="endDate"
          @change="onStartDateChange"
        >
          <text>{{ startDate || '开始日期' }}</text>
        </picker>
        <text class="separator">至</text>
        <picker 
          mode="date" 
          :value="endDate" 
          :start="startDate"
          @change="onEndDateChange"
        >
          <text>{{ endDate || '结束日期' }}</text>
        </picker>
      </view>
    </view>
    
    <!-- 缴费记录列表 -->
    <scroll-view 
      scroll-y 
      class="record-list"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
      @scrolltolower="onLoadMore"
    >
      <view 
        class="record-item card"
        v-for="(record, index) in filteredRecords"
        :key="index"
        @tap="viewDetail(record)"
      >
        <view class="header">
          <view class="hospital-info">
            <image :src="record.hospitalLogo" mode="aspectFit" class="logo" />
            <view class="info">
              <text class="name">{{ record.hospitalName }}</text>
              <text class="type">{{ record.paymentType }}</text>
            </view>
          </view>
          <text class="status" :class="record.status">{{ record.statusText }}</text>
        </view>
        
        <view class="detail-info">
          <view class="info-item">
            <text class="label">缴费项目</text>
            <text class="value">{{ record.items.join('、') }}</text>
          </view>
          <view class="info-item">
            <text class="label">就诊人</text>
            <text class="value">{{ record.patientName }}</text>
          </view>
          <view class="info-item">
            <text class="label">就诊科室</text>
            <text class="value">{{ record.departmentName }}</text>
          </view>
          <view class="info-item">
            <text class="label">缴费时间</text>
            <text class="value">{{ record.time }}</text>
          </view>
        </view>
        
        <view class="footer">
          <view class="amount-info">
            <text class="label">缴费金额</text>
            <text class="amount">¥{{ record.amount }}</text>
          </view>
          <view class="actions">
            <button 
              class="action-btn"
              v-if="record.status === 'unpaid'"
              @tap.stop="goPay(record)"
            >去支付</button>
            <button 
              class="action-btn"
              v-if="record.status === 'completed'"
              @tap.stop="viewInvoice(record)"
            >查看发票</button>
          </view>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view class="load-more" v-if="hasMore">
        <text>加载中...</text>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredRecords.length === 0">
        <image src="/static/empty/no-payment.png" mode="aspectFit" />
        <text>暂无缴费记录</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 统计数据
const stats = ref({
  totalAmount: 1280.00,
  totalCount: 8,
  pendingCount: 2
})

// 筛选相关
const paymentTypes = [
  { label: '全部', value: 'all' },
  { label: '待支付', value: 'unpaid' },
  { label: '已完成', value: 'completed' },
  { label: '已退款', value: 'refunded' }
]
const currentType = ref('all')
const startDate = ref('')
const endDate = ref('')

// 缴费记录数据
const records = ref([
  {
    id: 1,
    hospitalName: '澳门镜湖医院',
    hospitalLogo: '/static/hospital/kiang-wu.jpg',
    paymentType: '门诊缴费',
    departmentName: '心内科',
    patientName: '张三',
    items: ['挂号费', '检查费', '药品费'],
    amount: 360.00,
    time: '2024-03-25 09:30',
    status: 'unpaid',
    statusText: '待支付'
  },
  {
    id: 2,
    hospitalName: '澳门科大医院',
    hospitalLogo: '/static/hospital/must.jpg',
    paymentType: '住院预交金',
    departmentName: '骨科',
    patientName: '张三',
    items: ['住院预交金'],
    amount: 5000.00,
    time: '2024-03-20 15:00',
    status: 'completed',
    statusText: '已完成'
  }
])

// 筛选记录
const filteredRecords = computed(() => {
  let result = records.value
  
  // 状态筛选
  if (currentType.value !== 'all') {
    result = result.filter(record => record.status === currentType.value)
  }
  
  // 日期筛选
  if (startDate.value && endDate.value) {
    result = result.filter(record => {
      const recordDate = record.time.split(' ')[0]
      return recordDate >= startDate.value && recordDate <= endDate.value
    })
  }
  
  return result
})

// 分页相关
const hasMore = ref(true)
const refreshing = ref(false)

// 选择类型
const selectType = (type) => {
  currentType.value = type
}

// 日期选择
const onStartDateChange = (e) => {
  startDate.value = e.detail.value
}

const onEndDateChange = (e) => {
  endDate.value = e.detail.value
}

// 查看详情
const viewDetail = (record) => {
  uni.navigateTo({
    url: `/pages/payment/detail?id=${record.id}`
  })
}

// 去支付
const goPay = (record) => {
  uni.navigateTo({
    url: `/pages/payment/index?id=${record.id}`
  })
}

// 查看发票
const viewInvoice = (record) => {
  uni.navigateTo({
    url: `/pages/payment/invoice?id=${record.id}`
  })
}

// 下拉刷新
const onRefresh = () => {
  refreshing.value = true
  loadRecords()
  setTimeout(() => {
    refreshing.value = false
  }, 1000)
}

// 加载更多
const onLoadMore = () => {
  if (!hasMore.value) return
  loadRecords()
}

// 加载记录
const loadRecords = () => {
  // 这里调用API加载数据
  setTimeout(() => {
    hasMore.value = false
  }, 1000)
}
</script>

<style lang="scss">
.payment-record {
  min-height: 100vh;
  background: $bg-color;
  
  .stats-card {
    margin: 20rpx;
    background: $primary-gradient;
    border-radius: $radius-lg;
    padding: 40rpx 30rpx;
    display: flex;
    align-items: center;
    box-shadow: $shadow-md;
    
    .stat-item {
      flex: 1;
      text-align: center;
      
      .count {
        font-size: 40rpx;
        color: #fff;
        font-weight: bold;
        margin-bottom: 8rpx;
        display: block;
      }
      
      .label {
        font-size: 26rpx;
        color: rgba(255,255,255,0.9);
      }
    }
    
    .divider {
      width: 2rpx;
      height: 60rpx;
      background: rgba(255,255,255,0.2);
    }
  }
  
  .filter-bar {
    background: #fff;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: $shadow-sm;
    
    .type-filter {
      display: flex;
      margin-bottom: 20rpx;
      overflow-x: hidden;
      
      text {
        flex: 1;
        text-align: center;
        font-size: 28rpx;
        color: $text-regular;
        padding: 12rpx 0;
        position: relative;
        white-space: nowrap;
        
        &.active {
          color: $primary-color;
          font-weight: bold;
          
          &::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 40rpx;
            height: 4rpx;
            background: $primary-color;
            border-radius: 2rpx;
          }
        }
      }
    }
    
    .date-filter {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow-x: hidden;
      
      picker {
        flex: 1;
        width: 0;
        
        text {
          display: block;
          text-align: center;
          font-size: 26rpx;
          color: $text-regular;
          padding: 12rpx 0;
          background: $bg-color;
          border-radius: $radius-md;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      
      .separator {
        padding: 0 20rpx;
        font-size: 26rpx;
        color: $text-secondary;
      }
    }
  }
  
  .record-list {
    height: calc(100vh - 300rpx);
    padding: 0 20rpx;
    overflow-x: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
    
    .record-item {
      margin-bottom: 20rpx;
      
      .header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20rpx;
        
        .hospital-info {
          display: flex;
          align-items: center;
          
          .logo {
            width: 60rpx;
            height: 60rpx;
            border-radius: $radius-sm;
            margin-right: 16rpx;
          }
          
          .info {
            .name {
              font-size: 30rpx;
              color: $text-primary;
              font-weight: bold;
              margin-bottom: 4rpx;
              display: block;
            }
            
            .type {
              font-size: 26rpx;
              color: $text-regular;
            }
          }
        }
        
        .status {
          font-size: 24rpx;
          padding: 4rpx 12rpx;
          border-radius: $radius-sm;
          
          &.unpaid {
            color: $warning;
            background: rgba($warning, 0.1);
          }
          
          &.completed {
            color: $success;
            background: rgba($success, 0.1);
          }
          
          &.refunded {
            color: $text-secondary;
            background: rgba($text-secondary, 0.1);
          }
        }
      }
      
      .detail-info {
        padding: 20rpx 0;
        border-top: 1rpx solid #eee;
        border-bottom: 1rpx solid #eee;
        
        .info-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12rpx;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .label {
            font-size: 26rpx;
            color: $text-regular;
          }
          
          .value {
            font-size: 26rpx;
            color: $text-primary;
          }
        }
      }
      
      .footer {
        padding-top: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .amount-info {
          .label {
            font-size: 26rpx;
            color: $text-regular;
            margin-right: 12rpx;
          }
          
          .amount {
            font-size: 32rpx;
            color: $danger;
            font-weight: bold;
          }
        }
        
        .actions {
          display: flex;
          gap: 20rpx;
          
          .action-btn {
            height: 60rpx;
            line-height: 60rpx;
            padding: 0 30rpx;
            font-size: 26rpx;
            color: $primary-color;
            background: $primary-light;
            border-radius: $radius-xl;
            
            &:active {
              opacity: 0.8;
            }
          }
        }
      }
      
      &:active {
        transform: scale(0.99);
      }
    }
  }
  
  .empty-state {
    padding: 120rpx 0;
    text-align: center;
    
    image {
      width: 240rpx;
      height: 240rpx;
      margin-bottom: 30rpx;
    }
    
    text {
      font-size: 28rpx;
      color: $text-secondary;
    }
  }
}
</style> 